<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<h1>canvas图片处理</h1>
	<div>选择本地图片:</div>
	<div>
		<input type="file" id="file" name="file" onchange="setFile1(this,image)" placeholder="请选择一张本地图片">
		<input type="file" id="file2" name="file2" onchange="setFile2(this,image2)" placeholder="请选择另一张本地图片">		
	</div>
	<canvas id="canvas" style="display:block;margin: 0 auto;border:1px solid #aaa;">
		你的浏览器不支持canvas
	</canvas>
	<canvas id="offCanvas" style="display: block;">
		你的浏览器不支持canvas
	</canvas>	

	<script type="text/javascript">
		var canvas = document.getElementById("canvas")
		var ctx = canvas.getContext("2d")

		var offCanvas = document.getElementById("offCanvas")
		var offCtx = offCanvas.getContext("2d")

		var isMouseDown = true;	

		var image = new Image()
		var image2 = new Image()

		let setFile = function (obj,imgObj,e){
			e = e || window.event;
			if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
		        alert("很遗憾，您浏览器版本太老了，无法使用我们的小工具 ！");
		        return;
		    }
		    //console.log(e);
			//if(e.files.length > 0)$(areaId).src = getObjectURL(e.files[0]);
			//var files=document.getElementById("file").files;
			var files=obj.files;
			//document.getElementById("pic").innerHTML="";
			if(files.length>0){
				var fr=new FileReader();
				fr.readAsDataURL(files[0]);
				fr.onload=function(c){
					imgObj.src = c.target.result;
				};

			}			
		}
		setFile1 = function (thisObj,imgObj){
			//console.log(p1.files,p2,p3);return;
			setFile(thisObj,imgObj);
		}
		setFile2 = function(thisObj){
			console.log("setFile2")
			setFile(thisObj,image2);
		}
		image.onload = function(){
			canvas.width = image.width;
			canvas.height = image.height;
			ctx.drawImage(image,0,0);
		}
		image2.onload = function(){
			console.log("onload");
			offCanvas.width = image2.width;
			offCanvas.height = image2.height;
			canvas.height = image.height+image2.height*0.8;
			offCtx.drawImage(image2,0,0);
			isMouseDown = true;
			drawCanvas2(false);
		}
		function windowToCanvas(x,y){
			var bbox = canvas.getBoundingClientRect()
			return {x:x-bbox.left,y:y-bbox.top}
		}
		//var rgba = null;
		canvas.onmousedown = function(e){
			e.preventDefault()
			/*
			var point = windowToCanvas(e.clientX,e.clientY);
			//console.log(e.clientX,e.clientY)
			console.log(point.x,point.y)
			//isMouseDown = true;
			drawCanvas2(true,point);
			*/
			isMouseDown = false;
		}
		canvas.onmousemove = function(e){
			e.preventDefault()

			if( isMouseDown == true){
				var point = windowToCanvas(e.clientX,e.clientY);
				console.log(point.x,point.y)
				drawCanvas2(true,point);							
			}
		}
		/*
		canvas.onmouseup = function(e){
			e.preventDefault()

			isMouseDown = false;
			//drawCanvas2(false);			
		}
		canvas.onmouseout = function(e){
			e.preventDefault()
			isMouseDown = false;
			//drawCanvas2(false)		
		}*/
		function drawCanvas2(isShow,point){
			ctx.clearRect(0,0,canvas.width,canvas.height);
			ctx.drawImage(image,0,0)
			if(isShow == true){
				drawCanvas2True(point);
			}
		}
		function drawCanvas2True(point){
			ctx.drawImage(offCanvas,0,point.y)
		}
	</script>
</body>
</html>